<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增器材')" />
<!--    <th:block th:include="include :: layout-latest-css" />-->
<!--    <th:block th:include="include :: ztree-css" />-->
    <th:block th:include="include :: select2-css" />
    <th:block th:include="include :: jquery-smartwizard-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-device-add">
            <div class="form-group">    
                <label class="col-sm-3 control-label  is-required">器材类型：</label>
                <div class="col-sm-8">
<!--                    <input name="name" class="form-control" type="text" autocomplete="off" required>-->
                    <div class="input-group">
                        <input name="typeName" onclick="gotoSelectValidDeviceTypeTree()" autocomplete="off" class="form-control" id="typeName" type="text" placeholder="请选择器材类型" readonly>
                        <span class="input-group-addon"><i class="fa fa-search"></i></span>
                        <input type="hidden" name="typeId" id="typeId"  autocomplete="off" value="0" required/>
                    </div>
                </div>
            </div>
<!--            <div class="form-group">    -->
<!--                <label class="col-sm-3 control-label">器材编号：</label>-->
<!--                <div class="col-sm-8">-->
<!--                    <input name="serialNumber" class="form-control" type="text">-->
<!--                </div>-->
<!--            </div>-->
            <div class="form-group">    
                <label class="col-sm-3 control-label  is-required">器材型号：</label>
                <div class="col-sm-8">
                    <div class="input-group">
                        <input id="modeName" placeholder="请输入器材型号名称" name="modeName" autocomplete="off" class="form-control"  type="text" required maxlength="30">
                        <input type="hidden" name="modeId" id="modeId" class="form-control" />
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">备注：</label>
                <div class="col-sm-8">
                    <input name="note" class="form-control" type="text" autocomplete="off" >
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label   is-required">状态：</label>
                <div class="col-sm-8">
                    <div class="input-group">
                        <select name="valid" class="form-control" th:with="type=${@dict.getType('sys_device_valid')}">
                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                        </select>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
<!--    <th:block th:include="include :: layout-latest-js" />-->
<!--    <th:block th:include="include :: ztree-js" />-->
    <th:block th:include="include :: select2-js" />
    <th:block th:include="include :: bootstrap-suggest-js" />
    <script th:inline="javascript">
        var prefix = ctx + "system/device"
        var icon = "<i class='fa fa-times-circle'></i> ";
        $("#form-device-add").validate({
            focusCleanup: true,
            rules: {
                // typeId: "required",
                typeName: "required",
                modeId:{
                    required:true,
                    min:1
                }
            },
            messages: {
                typeName: icon + "请选择器材类型",
                modeId: {
                    required:icon + "请输入器材型号",
                    min:icon + "请选择系统提供的器材型号",
                }
            }
        });

        function submitHandler() {
            if ($.validate.form()) {
                var modeIdValue = $("#modeId").val();
                if("" == modeIdValue || 0 == modeIdValue){
                    $.modal.alert("请选择系统提供的器材型号!");
                }else{
                    $.operate.save(prefix + "/add", $('#form-device-add').serialize());
                }
            }
        }

        /* 器材管理-选择器材类型名称 */
        function gotoSelectValidDeviceTypeTree() {
            var url = ctx + "system/type/gotoDeptTree";
            var options = {
                title: '选择器材类型',
                width: "380",
                url: url,
                callBack: doSubmit
            };
            $.modal.openOptions(options);
        }
        function doSubmit(index, layero){
            var tree = layero.find("iframe")[0].contentWindow.$._tree;
            var body = layer.getChildFrame('body', index);
            $("#typeId").val(body.find('#deviceTypeId').val());
            $("#typeName").val(body.find('#deviceTypeName').val());
            $("#modeId").val("");
            $("#modeName").val("");
            layer.close(index);
        }

        // 器材型号自动补全 start
        var modeResult;
        var testBsSuggest = $("#modeName").bsSuggest({
            allowNoKeyword: true, //是否允许无关键字时请求数据
            multiWord: false, //以分隔符号分割的多关键字支持
            url: "http://"+window.location.host + "/system/mode/queryValidModeByParam",
            //调整 ajax 请求参数方法，用于更多的请求配置需求。如对请求关键字作进一步处理、修改超时时间等
            fnAdjustAjaxParam: function(keyword, opts) {
                //console.log('ajax 请求参数调整：', keyword, opts);
                return {
                    data: {
                        modeName:$('#modeName').val(),
                        typeId: $('#typeId').val()
                    }
                };
            },
            getDataMethod: "url", //获取数据的方式，总是从 URL 获取  url
            effectiveFields: ["typeName","modeName"],
            searchFields: [ "typeName","modeName"],
            effectiveFieldsAlias:{typeName:"器材类型",modeName: "器材型号"},
            clearable: true,
            showBtn: true,
            idField: "id",
            keyField: "modeName"
        }).on('onDataRequestSuccess', function (e, result) {
            modeResult = result.value;
        }).on('onSetSelectValue', function (e, keyword) {
            $("#modeId").val(keyword.id);
            $("#modeName").val(keyword.key);
            $("#typeId").val(modeResult[keyword.index].typeId);
            $("#typeName").val(modeResult[keyword.index].typeName);
        }).on('onUnsetSelectValue', function (e) {
            $("#modeId").val("");
            // $("#modeName").val(keyword.key);
            // $("#typeId").val(0);
            // $("#typeName").val("");
        });
        // 器材型号自动补全 end
    </script>
</body>
</html>